<template>
  <div>
    <h2>帖子审核</h2>
    <el-input v-model="searchText" placeholder="请输入帖子标题" width="150"></el-input>
    <el-button @click="fetchPostList()">搜索</el-button>
    <el-table :data="posts" border>
      <el-table-column prop="id" label="帖子ID" width="100"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
            {{ scope.row.status === "1" ? "已通过" : "待审核" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.status === '0'" round
              type="warning"
              @click="approvePost(scope.row)">通过
          </el-button>
          <el-button round type="danger" @click="deletePost(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="审核帖子" :visible.sync="approveDialogVisible">
      <el-form ref="approveForm" :model="approveForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="approveForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="approveForm.content"
            type="textarea"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="approvePost">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPostList, updatePost, deletePost } from "@/api/post";

export default {
  data() {
    return {
      posts: [],
      searchText: "",
      approveDialogVisible: false,
      approveForm: {
        id: 0,
        title: "",
        content: "",
        status: ""
      },
    };
  },
  mounted() {
    this.fetchPostList();
  },
  methods: {
    fetchPostList() {
      getPostList(decodeURIComponent(this.searchText))
        .then((response) => {
          this.posts = response.data;
          // console.log(this.posts)
        })
        .catch((error) => {
          console.error("Failed to fetch post list:", error);
        });
    },
    approvePost(post) {
      console.log(post);
      if (!post) {
        // 通过按钮点击触发的审核操作
        this.approveForm.id = 0;
        this.approveForm.title = "";
        this.approveForm.content = "";
        this.approveDialogVisible = true;
      } else {
        // 审核帖子通过
        updatePost({
          id: post.id,
          title: post.title,
          content: post.content,
          status: "1", // 设置状态为已通过
        })
          .then(() => {
            this.approveDialogVisible = false;
            this.fetchPostList();
          })
          .catch((error) => {
            console.error("Failed to update post:", error);
          });
      }
    },
    deletePost(postId) {
      this.$confirm("确认删除该帖子?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePost(postId)
            .then(() => {
              this.fetchPostList();
            })
            .catch((error) => {
              console.error("Failed to delete post:", error);
            });
        })
        .catch(() => {
          // 取消删除
        });
    },
  },
};
</script>